<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>动态列表 - 社交圈</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f5f5f7;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1d1d1f;
      padding-bottom: 60px;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: white;
      padding: 12px 15px;
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .nav-btn {
      color: #1d1d1f;
      font-size: 20px;
    }
    
    /* 搜索栏 */
    .search-bar {
      padding: 10px 15px;
      background-color: white;
      border-bottom: 1px solid #eee;
    }
    
    .search-input-group {
      position: relative;
    }
    
    .search-input {
      width: 100%;
      padding: 10px 15px 10px 40px;
      background-color: #f0f0f0;
      border-radius: 20px;
      border: none;
      font-size: 14px;
      outline: none;
    }
    
    .search-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #8e8e93;
    }
    
    /* 筛选工具栏 */
    .filter-toolbar {
      background-color: white;
      padding: 8px 15px;
      border-bottom: 1px solid #eee;
      overflow-x: auto;
      white-space: nowrap;
    }
    
    .filter-chip {
      display: inline-block;
      padding: 6px 12px;
      background-color: #f0f0f0;
      border-radius: 15px;
      font-size: 14px;
      margin-right: 8px;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .filter-chip.active {
      background-color: #007aff;
      color: white;
    }
    
    .filter-dropdown {
      display: inline-block;
      margin-right: 8px;
    }
    
    .filter-dropdown .btn {
      padding: 6px 12px;
      background-color: #f0f0f0;
      color: #1d1d1f;
      border-radius: 15px;
      font-size: 14px;
      border: none;
      display: flex;
      align-items: center;
    }
    
    .filter-dropdown .btn i {
      margin-left: 5px;
      font-size: 12px;
    }
    
    /* 故事/状态条 */
    .stories-bar {
      background-color: white;
      padding: 10px 15px;
      overflow-x: auto;
      white-space: nowrap;
      border-bottom: 1px solid #eee;
    }
    
    .story-item {
      display: inline-block;
      margin-right: 15px;
      text-align: center;
    }
    
    .story-avatar {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #ff3b30;
      padding: 2px;
    }
    
    .story-add {
      background-color: #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #666;
    }
    
    .story-name {
      font-size: 12px;
      margin-top: 5px;
      max-width: 60px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    /* 动态列表容器 */
    .feed-container {
      margin-top: 10px;
    }
    
    /* 动态项通用样式 */
    .feed-item {
      background-color: white;
      margin-bottom: 10px;
      border-bottom: 1px solid #eee;
    }
    
    /* 动态头部 */
    .feed-header {
      padding: 10px 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .user-info {
      display: flex;
      align-items: center;
    }
    
    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
    }
    
    .user-name {
      font-weight: 600;
      font-size: 14px;
    }
    
    .post-time {
      font-size: 12px;
      color: #8e8e93;
      margin-top: 2px;
    }
    
    .more-options {
      color: #8e8e93;
      background: none;
      border: none;
      font-size: 18px;
    }
    
    /* 动态内容 */
    .feed-content {
      padding: 0 15px 10px;
      font-size: 15px;
      line-height: 1.5;
    }
    
    .feed-content .hashtag {
      color: #007aff;
    }
    
    /* 无图动态 */
    .feed-no-media {
      padding-bottom: 15px;
    }
    
    /* 单图动态 */
    .feed-single-media .media-container {
      width: 100%;
      height: auto;
    }
    
    .feed-single-media img {
      width: 100%;
      height: auto;
      display: block;
    }
    
    /* 多图动态 */
    .feed-multi-media .media-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 2px;
    }
    
    .feed-multi-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    
    /* 多图布局调整 */
    .media-container.two-images {
      grid-template-columns: 1fr 1fr;
    }
    
    .media-container.four-images {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
    }
    
    /* 动态底部操作 */
    .feed-actions {
      padding: 5px 15px 10px;
      display: flex;
      justify-content: space-between;
      border-top: 1px solid #eee;
      margin: 0 15px;
    }
    
    .action-button {
      display: flex;
      align-items: center;
      color: #8e8e93;
      background: none;
      border: none;
      font-size: 14px;
      padding: 5px 10px;
    }
    
    .action-button i {
      font-size: 20px;
      margin-right: 8px;
    }
    
    .action-button.liked {
      color: #ff3b30;
    }
    
    /* 互动信息 */
    .feed-interactions {
      padding: 0 15px 10px;
    }
    
    .likes-count {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 5px;
    }
    
    .comments-preview {
      font-size: 14px;
    }
    
    .comment-author {
      font-weight: 600;
    }
    
    .view-more-comments {
      color: #8e8e93;
      font-size: 14px;
      margin-top: 5px;
      display: inline-block;
    }
    
    /* 评论输入框 */
    .comment-input-container {
      padding: 10px 15px;
      display: flex;
      align-items: center;
      border-top: 1px solid #eee;
      margin: 0 15px;
    }
    
    .comment-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
    }
    
    .comment-input {
      flex: 1;
      background-color: #f0f0f0;
      border-radius: 20px;
      padding: 8px 15px;
      font-size: 14px;
      border: none;
      outline: none;
    }
    
    .comment-actions {
      display: flex;
      margin-left: 10px;
    }
    
    .comment-action {
      color: #8e8e93;
      background: none;
      border: none;
      font-size: 18px;
      margin-left: 8px;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      border-top: 1px solid #eee;
      display: flex;
      padding: 8px 0;
      z-index: 95;
    }
    
    .nav-link {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #8e8e93;
      font-size: 10px;
      text-decoration: none;
    }
    
    .nav-link.active {
      color: #007aff;
    }
    
    .nav-icon {
      font-size: 22px;
      margin-bottom: 3px;
    }
    
    /* 发布按钮 */
    .create-post-btn {
      position: fixed;
      bottom: 80px;
      right: 20px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #007aff;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      box-shadow: 0 3px 10px rgba(0, 122, 255, 0.4);
      border: none;
      cursor: pointer;
      z-index: 90;
    }
    
    /* 加载更多 */
    .load-more {
      text-align: center;
      padding: 15px;
      color: #007aff;
      font-size: 15px;
      background-color: white;
      margin: 10px 0;
      cursor: pointer;
    }
    
    /* 筛选结果提示 */
    .filter-result {
      background-color: #e8f4fd;
      color: #007aff;
      padding: 8px 15px;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .clear-filters {
      color: #007aff;
      background: none;
      border: none;
      font-size: 14px;
      text-decoration: underline;
    }
    
    /* 空状态 */
    .empty-state {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 50px 20px;
      text-align: center;
    }
    
    .empty-icon {
      font-size: 60px;
      color: #ddd;
      margin-bottom: 20px;
    }
    
    .empty-text {
      color: #8e8e93;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav">
    <button class="btn btn-link p-0 nav-btn">
      <i class="fa fa-camera"></i>
    </button>
    <h1 class="nav-title">朋友圈</h1>
    <button class="btn btn-link p-0 nav-btn">
      <i class="fa fa-paper-plane-o"></i>
    </button>
  </div>
  
  <!-- 搜索栏 -->
  <div class="search-bar">
    <div class="search-input-group">
      <i class="fa fa-search search-icon"></i>
      <input type="text" class="search-input" placeholder="搜索动态、好友或话题...">
    </div>
  </div>
  
  <!-- 筛选工具栏 -->
  <div class="filter-toolbar">
    <div class="filter-chip active" data-filter="all">全部</div>
    <div class="filter-chip" data-filter="image">有图</div>
    <div class="filter-chip" data-filter="text">纯文字</div>
    
    <div class="filter-dropdown">
      <div class="btn-group">
        <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          好友
          <i class="fa fa-chevron-down"></i>
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#" data-filter="friend-all">全部好友</a></li>
          <li><a class="dropdown-item" href="#" data-filter="friend-close">亲密好友</a></li>
          <li><a class="dropdown-item" href="#" data-filter="friend-colleague">同事</a></li>
          <li><a class="dropdown-item" href="#" data-filter="friend-family">家人</a></li>
        </ul>
      </div>
    </div>
    
    <div class="filter-dropdown">
      <div class="btn-group">
        <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
          时间
          <i class="fa fa-chevron-down"></i>
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#" data-filter="time-all">全部时间</a></li>
          <li><a class="dropdown-item" href="#" data-filter="time-today">今天</a></li>
          <li><a class="dropdown-item" href="#" data-filter="time-week">本周</a></li>
          <li><a class="dropdown-item" href="#" data-filter="time-month">本月</a></li>
        </ul>
      </div>
    </div>
    
    <div class="filter-chip" data-filter="hot">热门</div>
    <div class="filter-chip" data-filter="nearby">附近</div>
  </div>
  
  <!-- 筛选结果提示 -->
  <div class="filter-result" style="display: none;">
    <span>正在显示：<span id="filter-display">全部动态</span></span>
    <button class="clear-filters">清除筛选</button>
  </div>
  
  <!-- 故事/状态条 -->
  <div class="stories-bar">
    <div class="story-item">
      <div class="story-avatar story-add">
        <i class="fa fa-plus"></i>
      </div>
      <div class="story-name">添加故事</div>
    </div>
    <div class="story-item">
      <img src="https://picsum.photos/100/100?random=1" alt="好友头像" class="story-avatar">
      <div class="story-name">张小明</div>
    </div>
    <div class="story-item">
      <img src="https://picsum.photos/100/100?random=2" alt="好友头像" class="story-avatar">
      <div class="story-name">李华</div>
    </div>
    <div class="story-item">
      <img src="https://picsum.photos/100/100?random=3" alt="好友头像" class="story-avatar">
      <div class="story-name">王芳</div>
    </div>
    <div class="story-item">
      <img src="https://picsum.photos/100/100?random=4" alt="好友头像" class="story-avatar">
      <div class="story-name">赵伟</div>
    </div>
    <div class="story-item">
      <img src="https://picsum.photos/100/100?random=5" alt="好友头像" class="story-avatar">
      <div class="story-name">陈静</div>
    </div>
    <div class="story-item">
      <img src="https://picsum.photos/100/100?random=6" alt="好友头像" class="story-avatar">
      <div class="story-name">刘强</div>
    </div>
  </div>
  
  <!-- 动态列表 -->
  <div class="feed-container">
    <!-- 无图动态 -->
    <div class="feed-item feed-no-media" data-type="text" data-friend="colleague" data-time="today" data-hot="true">
      <div class="feed-header">
        <div class="user-info">
          <img src="https://picsum.photos/100/100?random=10" alt="用户头像" class="user-avatar">
          <div>
            <div class="user-name">张小明</div>
            <div class="post-time">今天 08:30</div>
          </div>
        </div>
        <button class="more-options">
          <i class="fa fa-ellipsis-h"></i>
        </button>
      </div>
      
      <div class="feed-content">
        刚完成了人生第一个马拉松！虽然累到不行，但成就感满满！感谢一路上为我加油的朋友们，特别感谢陪跑的 @李华 ，没有你我可能坚持不下来😂 <span class="hashtag">#运动#</span> <span class="hashtag">#马拉松#</span>
      </div>
      
      <div class="feed-actions">
        <button class="action-button like-btn">
          <i class="fa fa-heart-o"></i>
          <span>点赞</span>
        </button>
        <button class="action-button comment-btn">
          <i class="fa fa-comment-o"></i>
          <span>评论</span>
        </button>
        <button class="action-button share-btn">
          <i class="fa fa-share"></i>
          <span>分享</span>
        </button>
      </div>
      
      <div class="feed-interactions">
        <div class="likes-count">李华、王芳等 15 人点赞</div>
        <div class="comments-preview">
          <div><span class="comment-author">李华</span> 厉害啊！恭喜完成全马！</div>
          <div><span class="comment-author">王芳</span> 太佩服了！我连5公里都跑不完😅</div>
        </div>
        <div class="view-more-comments">查看全部 8 条评论</div>
      </div>
      
      <div class="comment-input-container">
        <img src="https://picsum.photos/100/100?random=99" alt="我的头像" class="comment-avatar">
        <input type="text" class="comment-input" placeholder="添加评论...">
        <div class="comment-actions">
          <button class="comment-action">
            <i class="fa fa-smile-o"></i>
          </button>
          <button class="comment-action">
            <i class="fa fa-paper-plane-o"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 单图动态 -->
    <div class="feed-item feed-single-media" data-type="image" data-friend="close" data-time="yesterday" data-hot="true">
      <div class="feed-header">
        <div class="user-info">
          <img src="https://picsum.photos/100/100?random=11" alt="用户头像" class="user-avatar">
          <div>
            <div class="user-name">李华</div>
            <div class="post-time">昨天 19:45</div>
          </div>
        </div>
        <button class="more-options">
          <i class="fa fa-ellipsis-h"></i>
        </button>
      </div>
      
      <div class="feed-content">
        周末探店成功！这家咖啡馆的提拉米苏简直绝了，环境也超赞，适合拍照📸 <span class="hashtag">#美食#</span> <span class="hashtag">#探店#</span>
      </div>
      
      <div class="media-container">
        <img src="https://picsum.photos/800/600?random=20" alt="咖啡馆照片">
      </div>
      
      <div class="feed-actions">
        <button class="action-button like-btn">
          <i class="fa fa-heart-o"></i>
          <span>点赞</span>
        </button>
        <button class="action-button comment-btn">
          <i class="fa fa-comment-o"></i>
          <span>评论</span>
        </button>
        <button class="action-button share-btn">
          <i class="fa fa-share"></i>
          <span>分享</span>
        </button>
      </div>
      
      <div class="feed-interactions">
        <div class="likes-count">张小明、陈静等 28 人点赞</div>
        <div class="comments-preview">
          <div><span class="comment-author">陈静</span> 这是哪家呀？看起来好棒！</div>
          <div><span class="comment-author">李华</span> <span class="comment-author">回复 陈静</span> downtown的"街角咖啡"，就在图书馆旁边</div>
        </div>
        <div class="view-more-comments">查看全部 12 条评论</div>
      </div>
      
      <div class="comment-input-container">
        <img src="https://picsum.photos/100/100?random=99" alt="我的头像" class="comment-avatar">
        <input type="text" class="comment-input" placeholder="添加评论...">
        <div class="comment-actions">
          <button class="comment-action">
            <i class="fa fa-smile-o"></i>
          </button>
          <button class="comment-action">
            <i class="fa fa-paper-plane-o"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 多图动态 (3张) -->
    <div class="feed-item feed-multi-media" data-type="image" data-friend="all" data-time="yesterday" data-hot="false" data-nearby="true">
      <div class="feed-header">
        <div class="user-info">
          <img src="https://picsum.photos/100/100?random=12" alt="用户头像" class="user-avatar">
          <div>
            <div class="user-name">王芳</div>
            <div class="post-time">昨天 14:20</div>
          </div>
        </div>
        <button class="more-options">
          <i class="fa fa-ellipsis-h"></i>
        </button>
      </div>
      
      <div class="feed-content">
        今天的徒步旅行太棒了！山顶的风景值得所有的汗水💦 <span class="hashtag">#户外#</span> <span class="hashtag">#徒步#</span> <span class="hashtag">#自然#</span>
      </div>
      
      <div class="media-container">
        <img src="https://picsum.photos/400/400?random=30" alt="徒步照片1">
        <img src="https://picsum.photos/400/400?random=31" alt="徒步照片2">
        <img src="https://picsum.photos/400/400?random=32" alt="徒步照片3">
      </div>
      
      <div class="feed-actions">
        <button class="action-button like-btn">
          <i class="fa fa-heart-o"></i>
          <span>点赞</span>
        </button>
        <button class="action-button comment-btn">
          <i class="fa fa-comment-o"></i>
          <span>评论</span>
        </button>
        <button class="action-button share-btn">
          <i class="fa fa-share"></i>
          <span>分享</span>
        </button>
      </div>
      
      <div class="feed-interactions">
        <div class="likes-count">刘强、张小明等 32 人点赞</div>
        <div class="comments-preview">
          <div><span class="comment-author">刘强</span> 这是哪里？看起来风景不错！</div>
          <div><span class="comment-author">王芳</span> <span class="comment-author">回复 刘强</span> 是城郊的青龙山，难度适中，很适合周末去</div>
        </div>
        <div class="view-more-comments">查看全部 15 条评论</div>
      </div>
      
      <div class="comment-input-container">
        <img src="https://picsum.photos/100/100?random=99" alt="我的头像" class="comment-avatar">
        <input type="text" class="comment-input" placeholder="添加评论...">
        <div class="comment-actions">
          <button class="comment-action">
            <i class="fa fa-smile-o"></i>
          </button>
          <button class="comment-action">
            <i class="fa fa-paper-plane-o"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 多图动态 (4张) -->
    <div class="feed-item feed-multi-media" data-type="image" data-friend="family" data-time="3days" data-hot="false">
      <div class="feed-header">
        <div class="user-info">
          <img src="https://picsum.photos/100/100?random=13" alt="用户头像" class="user-avatar">
          <div>
            <div class="user-name">赵伟</div>
            <div class="post-time">3天前</div>
          </div>
        </div>
        <button class="more-options">
          <i class="fa fa-ellipsis-h"></i>
        </button>
      </div>
      
      <div class="feed-content">
        新家装修终于完成了！历时三个月，每一个角落都是自己精心设计的，太有成就感了🏠 <span class="hashtag">#装修#</span> <span class="hashtag">#家居#</span>
      </div>
      
      <div class="media-container four-images">
        <img src="https://picsum.photos/400/400?random=40" alt="客厅照片">
        <img src="https://picsum.photos/400/400?random=41" alt="卧室照片">
        <img src="https://picsum.photos/400/400?random=42" alt="厨房照片">
        <img src="https://picsum.photos/400/400?random=43" alt="书房照片">
      </div>
      
      <div class="feed-actions">
        <button class="action-button like-btn">
          <i class="fa fa-heart-o"></i>
          <span>点赞</span>
        </button>
        <button class="action-button comment-btn">
          <i class="fa fa-comment-o"></i>
          <span>评论</span>
        </button>
        <button class="action-button share-btn">
          <i class="fa fa-share"></i>
          <span>分享</span>
        </button>
      </div>
      
      <div class="feed-interactions">
        <div class="likes-count">李华、王芳等 45 人点赞</div>
        <div class="comments-preview">
          <div><span class="comment-author">陈静</span> 风格好喜欢！特别是客厅的设计</div>
          <div><span class="comment-author">赵伟</span> <span class="comment-author">回复 陈静</span> 谢谢！客厅的沙发选了好久呢😉</div>
        </div>
        <div class="view-more-comments">查看全部 23 条评论</div>
      </div>
      
      <div class="comment-input-container">
        <img src="https://picsum.photos/100/100?random=99" alt="我的头像" class="comment-avatar">
        <input type="text" class="comment-input" placeholder="添加评论...">
        <div class="comment-actions">
          <button class="comment-action">
            <i class="fa fa-smile-o"></i>
          </button>
          <button class="comment-action">
            <i class="fa fa-paper-plane-o"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 多图动态 (2张) -->
    <div class="feed-item feed-multi-media" data-type="image" data-friend="close" data-time="4days" data-hot="true">
      <div class="feed-header">
        <div class="user-info">
          <img src="https://picsum.photos/100/100?random=14" alt="用户头像" class="user-avatar">
          <div>
            <div class="user-name">陈静</div>
            <div class="post-time">4天前</div>
          </div>
        </div>
        <button class="more-options">
          <i class="fa fa-ellipsis-h"></i>
        </button>
      </div>
      
      <div class="feed-content">
        第一次尝试做提拉米苏，没想到这么成功！味道和外面买的差不多呢😊 配方在最后一张图~ <span class="hashtag">#烘焙#</span> <span class="hashtag">#甜点#</span>
      </div>
      
      <div class="media-container two-images">
        <img src="https://picsum.photos/400/400?random=50" alt="提拉米苏成品">
        <img src="https://picsum.photos/400/400?random=51" alt="配方图">
      </div>
      
      <div class="feed-actions">
        <button class="action-button like-btn">
          <i class="fa fa-heart-o"></i>
          <span>点赞</span>
        </button>
        <button class="action-button comment-btn">
          <i class="fa fa-comment-o"></i>
          <span>评论</span>
        </button>
        <button class="action-button share-btn">
          <i class="fa fa-share"></i>
          <span>分享</span>
        </button>
      </div>
      
      <div class="feed-interactions">
        <div class="likes-count">张小明、李华等 37 人点赞</div>
        <div class="comments-preview">
          <div><span class="comment-author">李华</span> 看起来好好吃！求详细教程！</div>
          <div><span class="comment-author">陈静</span> <span class="comment-author">回复 李华</span> 已经把配方图放上去啦，很简单的～</div>
        </div>
        <div class="view-more-comments">查看全部 18 条评论</div>
      </div>
      
      <div class="comment-input-container">
        <img src="https://picsum.photos/100/100?random=99" alt="我的头像" class="comment-avatar">
        <input type="text" class="comment-input" placeholder="添加评论...">
        <div class="comment-actions">
          <button class="comment-action">
            <i class="fa fa-smile-o"></i>
          </button>
          <button class="comment-action">
            <i class="fa fa-paper-plane-o"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 空状态 -->
  <div class="empty-state">
    <i class="fa fa-search empty-icon"></i>
    <div class="empty-text">没有找到符合条件的动态</div>
  </div>
  
  <!-- 加载更多 -->
  <div class="load-more" id="loadMore">
    <i class="fa fa-spinner fa-spin"></i> 加载更多动态
  </div>
  
  <!-- 发布按钮 -->
  <button class="create-post-btn">
    <i class="fa fa-plus"></i>
  </button>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-link active">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-search nav-icon"></i>
      <span>发现</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-compass nav-icon"></i>
      <span>附近</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-user-o nav-icon"></i>
      <span>我的</span>
    </a>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 存储当前筛选条件
    let currentFilters = {
      type: 'all',
      friend: 'all',
      time: 'all',
      hot: false,
      nearby: false,
      search: ''
    };
    
    // 筛选芯片点击事件
    document.querySelectorAll('.filter-chip').forEach(chip => {
      chip.addEventListener('click', function() {
        const filterType = this.getAttribute('data-filter');
        
        // 更新筛选条件
        if (filterType === 'all') {
          resetFilters();
        } else if (filterType === 'image' || filterType === 'text') {
          currentFilters.type = filterType;
        } else if (filterType === 'hot') {
          currentFilters.hot = !currentFilters.hot;
        } else if (filterType === 'nearby') {
          currentFilters.nearby = !currentFilters.nearby;
        }
        
        // 更新UI
        updateFilterUI();
        applyFilters();
      });
    });
    
    // 下拉筛选事件
    document.querySelectorAll('.dropdown-item').forEach(item => {
      item.addEventListener('click', function(e) {
        e.preventDefault();
        const filterValue = this.getAttribute('data-filter');
        
        if (filterValue.startsWith('friend-')) {
          currentFilters.friend = filterValue.split('-')[1];
        } else if (filterValue.startsWith('time-')) {
          currentFilters.time = filterValue.split('-')[1];
        }
        
        // 更新按钮文本
        const btnText = this.textContent;
        const dropdownBtn = this.closest('.dropdown-menu').previousElementSibling;
        dropdownBtn.innerHTML = `${btnText} <i class="fa fa-chevron-down"></i>`;
        
        // 应用筛选
        applyFilters();
        updateFilterUI();
      });
    });
    
    // 搜索功能
    document.querySelector('.search-input').addEventListener('input', function() {
      currentFilters.search = this.value.toLowerCase().trim();
      applyFilters();
      updateFilterUI();
    });
    
    // 清除筛选按钮
    document.querySelector('.clear-filters').addEventListener('click', function() {
      resetFilters();
      updateFilterUI();
      applyFilters();
      
      // 重置搜索框
      document.querySelector('.search-input').value = '';
    });
    
    // 重置筛选条件
    function resetFilters() {
      currentFilters = {
        type: 'all',
        friend: 'all',
        time: 'all',
        hot: false,
        nearby: false,
        search: ''
      };
      
      // 重置下拉按钮文本
      document.querySelectorAll('.dropdown-toggle').forEach((btn, index) => {
        const defaultTexts = ['好友', '时间'];
        btn.innerHTML = `${defaultTexts[index]} <i class="fa fa-chevron-down"></i>`;
      });
    }
    
    // 更新筛选UI
    function updateFilterUI() {
      // 更新筛选芯片状态
      document.querySelectorAll('.filter-chip').forEach(chip => {
        const filterType = chip.getAttribute('data-filter');
        
        if (filterType === 'all') {
          chip.classList.toggle('active', currentFilters.type === 'all' && 
                                    currentFilters.friend === 'all' && 
                                    currentFilters.time === 'all' && 
                                    !currentFilters.hot && 
                                    !currentFilters.nearby &&
                                    currentFilters.search === '');
        } else if (filterType === 'image' || filterType === 'text') {
          chip.classList.toggle('active', currentFilters.type === filterType);
        } else if (filterType === 'hot') {
          chip.classList.toggle('active', currentFilters.hot);
        } else if (filterType === 'nearby') {
          chip.classList.toggle('active', currentFilters.nearby);
        }
      });
      
      // 更新筛选结果提示
      const filterResultEl = document.querySelector('.filter-result');
      const filterDisplayEl = document.getElementById('filter-display');
      
      const filterLabels = [];
      
      if (currentFilters.type === 'image') filterLabels.push('有图动态');
      if (currentFilters.type === 'text') filterLabels.push('纯文字动态');
      if (currentFilters.friend === 'close') filterLabels.push('亲密好友');
      if (currentFilters.friend === 'colleague') filterLabels.push('同事');
      if (currentFilters.friend === 'family') filterLabels.push('家人');
      if (currentFilters.time === 'today') filterLabels.push('今天');
      if (currentFilters.time === 'week') filterLabels.push('本周');
      if (currentFilters.time === 'month') filterLabels.push('本月');
      if (currentFilters.hot) filterLabels.push('热门动态');
      if (currentFilters.nearby) filterLabels.push('附近动态');
      if (currentFilters.search) filterLabels.push(`搜索: ${currentFilters.search}`);
      
      if (filterLabels.length > 0) {
        filterDisplayEl.textContent = filterLabels.join('，');
        filterResultEl.style.display = 'flex';
      } else {
        filterResultEl.style.display = 'none';
      }
    }
    
    // 应用筛选条件
    function applyFilters() {
      const feedItems = document.querySelectorAll('.feed-item');
      let visibleCount = 0;
      
      feedItems.forEach(item => {
        let isVisible = true;
        
        // 类型筛选
        if (currentFilters.type === 'image' && !item.classList.contains('feed-single-media') && !item.classList.contains('feed-multi-media')) {
          isVisible = false;
        }
        if (currentFilters.type === 'text' && !item.classList.contains('feed-no-media')) {
          isVisible = false;
        }
        
        // 好友分组筛选
        if (currentFilters.friend !== 'all' && item.getAttribute('data-friend') !== currentFilters.friend && item.getAttribute('data-friend') !== 'all') {
          isVisible = false;
        }
        
        // 时间筛选
        if (currentFilters.time === 'today' && item.getAttribute('data-time') !== 'today') {
          isVisible = false;
        }
        if (currentFilters.time === 'week' && !['today', 'yesterday', '3days', '4days'].includes(item.getAttribute('data-time'))) {
          isVisible = false;
        }
        if (currentFilters.time === 'month' && item.getAttribute('data-time') === 'older') {
          isVisible = false;
        }
        
        // 热门筛选
        if (currentFilters.hot && item.getAttribute('data-hot') !== 'true') {
          isVisible = false;
        }
        
        // 附近筛选
        if (currentFilters.nearby && item.getAttribute('data-nearby') !== 'true') {
          isVisible = false;
        }
        
        // 搜索筛选
        if (currentFilters.search) {
          const content = item.querySelector('.feed-content').textContent.toLowerCase();
          const userName = item.querySelector('.user-name').textContent.toLowerCase();
          if (!content.includes(currentFilters.search) && !userName.includes(currentFilters.search)) {
            isVisible = false;
          }
        }
        
        // 应用显示/隐藏
        item.style.display = isVisible ? 'block' : 'none';
        if (isVisible) visibleCount++;
      });
      
      // 显示空状态或加载更多按钮
      const emptyState = document.querySelector('.empty-state');
      const loadMore = document.getElementById('loadMore');
      
      if (visibleCount === 0) {
        emptyState.style.display = 'flex';
        loadMore.style.display = 'none';
      } else {
        emptyState.style.display = 'none';
        loadMore.style.display = 'block';
      }
    }
    
    // 点赞功能
    document.querySelectorAll('.like-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const icon = this.querySelector('i');
        const text = this.querySelector('span');
        
        if (icon.classList.contains('fa-heart-o')) {
          icon.classList.remove('fa-heart-o');
          icon.classList.add('fa-heart');
          this.classList.add('liked');
          text.textContent = '已赞';
          
          // 更新点赞数
          const likesCountEl = this.closest('.feed-item').querySelector('.likes-count');
          if (likesCountEl) {
            let likesText = likesCountEl.textContent;
            let countMatch = likesText.match(/(\d+)/);
            
            if (countMatch) {
              let newCount = parseInt(countMatch[1]) + 1;
              likesText = likesText.replace(/\d+/, newCount);
              
              // 如果之前没有点赞过，添加到点赞列表
              if (!likesText.includes('我')) {
                if (likesText.includes('等')) {
                  likesText = likesText.replace('等', '、我等');
                } else {
                  likesText = '我、' + likesText;
                }
              }
              
              likesCountEl.textContent = likesText;
            }
          }
        } else {
          icon.classList.remove('fa-heart');
          icon.classList.add('fa-heart-o');
          this.classList.remove('liked');
          text.textContent = '点赞';
          
          // 更新点赞数
          const likesCountEl = this.closest('.feed-item').querySelector('.likes-count');
          if (likesCountEl) {
            let likesText = likesCountEl.textContent;
            let countMatch = likesText.match(/(\d+)/);
            
            if (countMatch) {
              let newCount = parseInt(countMatch[1]) - 1;
              likesText = likesText.replace(/\d+/, newCount);
              
              // 移除自己的点赞
              likesText = likesText.replace('我、', '').replace('、我', '').replace('我', '');
              
              likesCountEl.textContent = likesText;
            }
          }
        }
      });
    });
    
    // 评论功能
    document.querySelectorAll('.comment-btn, .comment-input, .view-more-comments').forEach(element => {
      element.addEventListener('click', function() {
        const commentInput = this.closest('.feed-item').querySelector('.comment-input');
        if (commentInput) {
          commentInput.focus();
        }
      });
    });
    
    // 发送评论
    document.querySelectorAll('.comment-action').forEach(action => {
      if (action.querySelector('.fa-paper-plane-o')) {
        action.addEventListener('click', function() {
          const commentInput = this.closest('.comment-input-container').querySelector('.comment-input');
          const commentText = commentInput.value.trim();
          
          if (commentText) {
            const commentsPreview = this.closest('.feed-item').querySelector('.comments-preview');
            
            // 创建新评论元素
            const newComment = document.createElement('div');
            newComment.innerHTML = `<span class="comment-author">我</span> ${commentText}`;
            
            // 添加到评论预览
            commentsPreview.insertBefore(newComment, commentsPreview.firstChild);
            
            // 更新评论数量
            const viewMoreEl = this.closest('.feed-item').querySelector('.view-more-comments');
            if (viewMoreEl) {
              let countMatch = viewMoreEl.textContent.match(/(\d+)/);
              if (countMatch) {
                let newCount = parseInt(countMatch[1]) + 1;
                viewMoreEl.textContent = viewMoreEl.textContent.replace(/\d+/, newCount);
              }
            }
            
            // 清空输入框
            commentInput.value = '';
          }
        });
      }
    });
    
    // 分享功能
    document.querySelectorAll('.share-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const userName = this.closest('.feed-item').querySelector('.user-name').textContent;
        alert(`分享 ${userName} 的动态到：微信、微博、QQ`);
      });
    });
    
    // 更多选项
    document.querySelectorAll('.more-options').forEach(btn => {
      btn.addEventListener('click', function() {
        const userName = this.closest('.feed-item').querySelector('.user-name').textContent;
        alert(`对 ${userName} 的动态进行操作：举报、不看他的动态、屏蔽`);
      });
    });
    
    // 发布动态按钮
    document.querySelector('.create-post-btn').addEventListener('click', function() {
      alert('打开发布动态界面：可以选择文字、图片、视频等类型');
    });
    
    // 加载更多动态
    document.getElementById('loadMore').addEventListener('click', function() {
      this.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 加载中...';
      
      // 模拟加载延迟
      setTimeout(() => {
        const container = document.querySelector('.feed-container');
        const mediaTypes = ['feed-no-media', 'feed-single-media', 'feed-multi-media'];
        const randomType = mediaTypes[Math.floor(Math.random() * mediaTypes.length)];
        
        // 随机生成数据属性
        const friendTypes = ['close', 'colleague', 'family', 'all'];
        const timeTypes = ['today', 'yesterday', '3days', '4days', 'older'];
        const randomFriend = friendTypes[Math.floor(Math.random() * friendTypes.length)];
        const randomTime = timeTypes[Math.floor(Math.random() * timeTypes.length)];
        const isHot = Math.random() > 0.5;
        const isNearby = Math.random() > 0.7;
        
        let typeAttr = randomType === 'feed-no-media' ? 'text' : 'image';
        
        let newFeed = '';
        
        if (randomType === 'feed-no-media') {
          newFeed = `
            <div class="feed-item feed-no-media" 
                 data-type="${typeAttr}" 
                 data-friend="${randomFriend}" 
                 data-time="${randomTime}" 
                 data-hot="${isHot}"
                 data-nearby="${isNearby}">
              <div class="feed-header">
                <div class="user-info">
                  <img src="https://picsum.photos/100/100?random=${Math.floor(Math.random() * 100)}" alt="用户头像" class="user-avatar">
                  <div>
                    <div class="user-name">刘强</div>
                    <div class="post-time">${randomTime === 'today' ? '今天' : 
                                           randomTime === 'yesterday' ? '昨天' : 
                                           randomTime === '3days' ? '3天前' : 
                                           randomTime === '4days' ? '4天前' : '1周前'} ${Math.floor(Math.random() * 24)}:${Math.floor(Math.random() * 60).toString().padStart(2, '0')}</div>
                  </div>
                </div>
                <button class="more-options">
                  <i class="fa fa-ellipsis-h"></i>
                </button>
              </div>
              
              <div class="feed-content">
                今天终于拿到驾照了！历时三个月，科二考了两次才过，太不容易了😭 感谢教练的耐心指导和朋友们的鼓励！ <span class="hashtag">#生活#</span> <span class="hashtag">#新手上路#</span>
              </div>
              
              <div class="feed-actions">
                <button class="action-button like-btn">
                  <i class="fa fa-heart-o"></i>
                  <span>点赞</span>
                </button>
                <button class="action-button comment-btn">
                  <i class="fa fa-comment-o"></i>
                  <span>评论</span>
                </button>
                <button class="action-button share-btn">
                  <i class="fa fa-share"></i>
                  <span>分享</span>
                </button>
              </div>
              
              <div class="feed-interactions">
                <div class="likes-count">张小明、李华等 ${Math.floor(Math.random() * 30) + 5} 人点赞</div>
                <div class="comments-preview">
                  <div><span class="comment-author">李华</span> 恭喜恭喜！终于可以开车带我兜风了😂</div>
                  <div><span class="comment-author">刘强</span> <span class="comment-author">回复 李华</span> 没问题，等我熟练熟练哈哈</div>
                </div>
                <div class="view-more-comments">查看全部 ${Math.floor(Math.random() * 10) + 3} 条评论</div>
              </div>
              
              <div class="comment-input-container">
                <img src="https://picsum.photos/100/100?random=99" alt="我的头像" class="comment-avatar">
                <input type="text" class="comment-input" placeholder="添加评论...">
                <div class="comment-actions">
                  <button class="comment-action">
                    <i class="fa fa-smile-o"></i>
                  </button>
                  <button class="comment-action">
                    <i class="fa fa-paper-plane-o"></i>
                  </button>
                </div>
              </div>
            </div>
          `;
        } else if (randomType === 'feed-single-media') {
          newFeed = `
            <div class="feed-item feed-single-media" 
                 data-type="${typeAttr}" 
                 data-friend="${randomFriend}" 
                 data-time="${randomTime}" 
                 data-hot="${isHot}"
                 data-nearby="${isNearby}">
              <div class="feed-header">
                <div class="user-info">
                  <img src="https://picsum.photos/100/100?random=${Math.floor(Math.random() * 100)}" alt="用户头像" class="user-avatar">
                  <div>
                    <div class="user-name">张小明</div>
                    <div class="post-time">${randomTime === 'today' ? '今天' : 
                                           randomTime === 'yesterday' ? '昨天' : 
                                           randomTime === '3days' ? '3天前' : 
                                           randomTime === '4days' ? '4天前' : '1周前'} ${Math.floor(Math.random() * 24)}:${Math.floor(Math.random() * 60).toString().padStart(2, '0')}</div>
                  </div>
                </div>
                <button class="more-options">
                  <i class="fa fa-ellipsis-h"></i>
                </button>
              </div>
              
              <div class="feed-content">
                今天拍到的日落，太美了！大自然的调色盘🎨 <span class="hashtag">#风景#</span> <span class="hashtag">#日落#</span>
              </div>
              
              <div class="media-container">
                <img src="https://picsum.photos/800/600?random=${Math.floor(Math.random() * 100)}" alt="日落照片">
              </div>
              
              <div class="feed-actions">
                <button class="action-button like-btn">
                  <i class="fa fa-heart-o"></i>
                  <span>点赞</span>
                </button>
                <button class="action-button comment-btn">
                  <i class="fa fa-comment-o"></i>
                  <span>评论</span>
                </button>
                <button class="action-button share-btn">
                  <i class="fa fa-share"></i>
                  <span>分享</span>
                </button>
              </div>
              
              <div class="feed-interactions">
                <div class="likes-count">王芳、陈静等 ${Math.floor(Math.random() * 50) + 10} 人点赞</div>
                <div class="comments-preview">
                  <div><span class="comment-author">王芳</span> 这是在哪里拍的？太漂亮了！</div>
                  <div><span class="comment-author">张小明</span> <span class="comment-author">回复 王芳</span> 是在滨江公园，今天天气特别好</div>
                </div>
                <div class="view-more-comments">查看全部 ${Math.floor(Math.random() * 20) + 5} 条评论</div>
              </div>
              
              <div class="comment-input-container">
                <img src="https://picsum.photos/100/100?random=99" alt="我的头像" class="comment-avatar">
                <input type="text" class="comment-input" placeholder="添加评论...">
                <div class="comment-actions">
                  <button class="comment-action">
                    <i class="fa fa-smile-o"></i>
                  </button>
                  <button class="comment-action">
                    <i class="fa fa-paper-plane-o"></i>
                  </button>
                </div>
              </div>
            </div>
          `;
        } else {
          // 随机生成2-4张图片的动态
          const imageCount = Math.floor(Math.random() * 3) + 2;
          let imageClass = '';
          if (imageCount === 2) imageClass = 'two-images';
          else if (imageCount === 4) imageClass = 'four-images';
          
          let imagesHtml = '';
          for (let i = 0; i < imageCount; i++) {
            imagesHtml += `<img src="https://picsum.photos/400/400?random=${Math.floor(Math.random() * 100)}" alt="照片${i+1}">`;
          }
          
          newFeed = `
            <div class="feed-item feed-multi-media" 
                 data-type="${typeAttr}" 
                 data-friend="${randomFriend}" 
                 data-time="${randomTime}" 
                 data-hot="${isHot}"
                 data-nearby="${isNearby}">
              <div class="feed-header">
                <div class="user-info">
                  <img src="https://picsum.photos/100/100?random=${Math.floor(Math.random() * 100)}" alt="用户头像" class="user-avatar">
                  <div>
                    <div class="user-name">陈静</div>
                    <div class="post-time">${randomTime === 'today' ? '今天' : 
                                           randomTime === 'yesterday' ? '昨天' : 
                                           randomTime === '3days' ? '3天前' : 
                                           randomTime === '4days' ? '4天前' : '1周前'} ${Math.floor(Math.random() * 24)}:${Math.floor(Math.random() * 60).toString().padStart(2, '0')}</div>
                  </div>
                </div>
                <button class="more-options">
                  <i class="fa fa-ellipsis-h"></i>
                </button>
              </div>
              
              <div class="feed-content">
                周末去了花卉市场，买了好多鲜花回来装扮房间，心情都变好了💐 <span class="hashtag">#生活#</span> <span class="hashtag">#鲜花#</span>
              </div>
              
              <div class="media-container ${imageClass}">
                ${imagesHtml}
              </div>
              
              <div class="feed-actions">
                <button class="action-button like-btn">
                  <i class="fa fa-heart-o"></i>
                  <span>点赞</span>
                </button>
                <button class="action-button comment-btn">
                  <i class="fa fa-comment-o"></i>
                  <span>评论</span>
                </button>
                <button class="action-button share-btn">
                  <i class="fa fa-share"></i>
                  <span>分享</span>
                </button>
              </div>
              
              <div class="feed-interactions">
                <div class="likes-count">李华、赵伟等 ${Math.floor(Math.random() * 40) + 8} 人点赞</div>
                <div class="comments-preview">
                  <div><span class="comment-author">李华</span> 好漂亮！那个粉色的是什么花？</div>
                  <div><span class="comment-author">陈静</span> <span class="comment-author">回复 李华</span> 是芍药，花期挺长的，而且特别香</div>
                </div>
                <div class="view-more-comments">查看全部 ${Math.floor(Math.random() * 15) + 4} 条评论</div>
              </div>
              
              <div class="comment-input-container">
                <img src="https://picsum.photos/100/100?random=99" alt="我的头像" class="comment-avatar">
                <input type="text" class="comment-input" placeholder="添加评论...">
                <div class="comment-actions">
                  <button class="comment-action">
                    <i class="fa fa-smile-o"></i>
                  </button>
                  <button class="comment-action">
                    <i class="fa fa-paper-plane-o"></i>
                  </button>
                </div>
              </div>
            </div>
          `;
        }
        
        container.insertAdjacentHTML('beforeend', newFeed);
        this.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 加载更多动态';
        
        // 为新添加的元素绑定事件
        bindNewFeedEvents();
        
        // 对新添加的元素应用当前筛选
        applyFilters();
      }, 1500);
    });
    
    // 为新添加的动态绑定事件
    function bindNewFeedEvents() {
      // 绑定点赞事件
      const newLikeBtns = document.querySelectorAll('.like-btn:not([data-bound])');
      newLikeBtns.forEach(btn => {
        btn.setAttribute('data-bound', 'true');
        btn.addEventListener('click', function() {
          const icon = this.querySelector('i');
          const text = this.querySelector('span');
          
          if (icon.classList.contains('fa-heart-o')) {
            icon.classList.remove('fa-heart-o');
            icon.classList.add('fa-heart');
            this.classList.add('liked');
            text.textContent = '已赞';
            
            // 更新点赞数
            const likesCountEl = this.closest('.feed-item').querySelector('.likes-count');
            if (likesCountEl) {
              let likesText = likesCountEl.textContent;
              let countMatch = likesText.match(/(\d+)/);
              
              if (countMatch) {
                let newCount = parseInt(countMatch[1]) + 1;
                likesText = likesText.replace(/\d+/, newCount);
                
                // 添加到点赞列表
                if (!likesText.includes('我')) {
                  if (likesText.includes('等')) {
                    likesText = likesText.replace('等', '、我等');
                  } else {
                    likesText = '我、' + likesText;
                  }
                }
                
                likesCountEl.textContent = likesText;
              }
            }
          } else {
            icon.classList.remove('fa-heart');
            icon.classList.add('fa-heart-o');
            this.classList.remove('liked');
            text.textContent = '点赞';
            
            // 更新点赞数
            const likesCountEl = this.closest('.feed-item').querySelector('.likes-count');
            if (likesCountEl) {
              let likesText = likesCountEl.textContent;
              let countMatch = likesText.match(/(\d+)/);
              
              if (countMatch) {
                let newCount = parseInt(countMatch[1]) - 1;
                likesText = likesText.replace(/\d+/, newCount);
                
                // 移除自己的点赞
                likesText = likesText.replace('我、', '').replace('、我', '').replace('我', '');
                
                likesCountEl.textContent = likesText;
              }
            }
          }
        });
      });
      
      // 绑定评论事件
      const newCommentBtns = document.querySelectorAll('.comment-btn:not([data-bound]), .view-more-comments:not([data-bound])');
      newCommentBtns.forEach(element => {
        element.setAttribute('data-bound', 'true');
        element.addEventListener('click', function() {
          const commentInput = this.closest('.feed-item').querySelector('.comment-input');
          if (commentInput) {
            commentInput.focus();
          }
        });
      });
      
      // 绑定评论输入框焦点事件
      const newCommentInputs = document.querySelectorAll('.comment-input:not([data-bound])');
      newCommentInputs.forEach(input => {
        input.setAttribute('data-bound', 'true');
        input.addEventListener('click', function() {
          this.focus();
        });
      });
      
      // 绑定发送评论事件
      const newSendBtns = document.querySelectorAll('.comment-action:not([data-bound])');
      newSendBtns.forEach(action => {
        if (action.querySelector('.fa-paper-plane-o')) {
          action.setAttribute('data-bound', 'true');
          action.addEventListener('click', function() {
            const commentInput = this.closest('.comment-input-container').querySelector('.comment-input');
            const commentText = commentInput.value.trim();
            
            if (commentText) {
              const commentsPreview = this.closest('.feed-item').querySelector('.comments-preview');
              
              // 创建新评论元素
              const newComment = document.createElement('div');
              newComment.innerHTML = `<span class="comment-author">我</span> ${commentText}`;
              
              // 添加到评论预览
              commentsPreview.insertBefore(newComment, commentsPreview.firstChild);
              
              // 更新评论数量
              const viewMoreEl = this.closest('.feed-item').querySelector('.view-more-comments');
              if (viewMoreEl) {
                let countMatch = viewMoreEl.textContent.match(/(\d+)/);
                if (countMatch) {
                  let newCount = parseInt(countMatch[1]) + 1;
                  viewMoreEl.textContent = viewMoreEl.textContent.replace(/\d+/, newCount);
                }
              }
              
              // 清空输入框
              commentInput.value = '';
            }
          });
        }
      });
      
      // 绑定分享事件
      const newShareBtns = document.querySelectorAll('.share-btn:not([data-bound])');
      newShareBtns.forEach(btn => {
        btn.setAttribute('data-bound', 'true');
        btn.addEventListener('click', function() {
          const userName = this.closest('.feed-item').querySelector('.user-name').textContent;
          alert(`分享 ${userName} 的动态到：微信、微博、QQ`);
        });
      });
      
      // 绑定更多选项事件
      const newMoreOptions = document.querySelectorAll('.more-options:not([data-bound])');
      newMoreOptions.forEach(btn => {
        btn.setAttribute('data-bound', 'true');
        btn.addEventListener('click', function() {
          const userName = this.closest('.feed-item').querySelector('.user-name').textContent;
          alert(`对 ${userName} 的动态进行操作：举报、不看他的动态、屏蔽`);
        });
      });
    }
    
    // 故事点击事件
    document.querySelectorAll('.story-item:not(:first-child)').forEach(item => {
      item.addEventListener('click', function() {
        const userName = this.querySelector('.story-name').textContent;
        alert(`查看 ${userName} 的故事`);
      });
    });
    
    // 添加故事点击事件
    document.querySelector('.story-item:first-child').addEventListener('click', function() {
      alert('创建新故事：可以拍摄照片或选择已有照片');
    });
  </script>
</body>
</html>
